import { defineComponent, onMounted, watch, nextTick, ref } from "vue";
import '@src/modules/trigger/view/design/style/header.scss'
import { useState } from "@src/modules/trigger/hooks/useVC";
import { openTab } from '@src/platform'
/* enum */
import { TriggerType } from '@src/modules/trigger/model/enum/index.ts'
/* state */
import state from '@src/modules/trigger/view/setting/util/state.js'
/* hooks */
import { useCurrentInstance } from '@src/modules/trigger/hooks/useVC.ts'

export default defineComponent({
    name: TriggerType.triggerDesignHeader,
    emits: ['save'],
    props: {
        triggerId: {
            type: String,
            default: ''
        }
    },
    setup(props, { emit }) {
        const [isEdit, setIsEdit] = useState(false)
        const [currentCtx, setData] = useCurrentInstance()
        const [title, setTitle] = useState(state.currentTriggerInfo.name || '');
        const inputRef = ref(null)
        const handleInput = (e: string)=> {
            setTitle(e)
        }

        const handleInputBlur = ()=> {
            setIsEdit(false)
            currentCtx.$set(state.currentTriggerInfo, 'name', title.value)
        }

        const handleBack = ()=> {
            // const id = window.frameElement?.dataset?.id;
            // this.$platform.closeTab(id);
            // const fromId = window.frameElement.getAttribute('id')
            // openTab({
            //     title: '新版触发器',
            //     close: true,
            //     url: '/trigger/design',
            //     reload: true,
            //     fromId
            // })
        }

        watch(() => state.currentTriggerInfo.name, (newVal) => {
            if (newVal) {
                setTitle(newVal)
            }
        }, { immediate: true })

        watch(() => isEdit.value, (newVal: boolean) => {
            if (newVal) {
                nextTick(() => {
                    if (!inputRef.value) return
                    inputRef.value.focus()
                })
            }
            
        })
        return ()=> (
            <header class="trigger-design-header">
                <div class="trigger-design-header__left">
                    {/* <i class="iconfont icon-left1" onClick={handleBack}></i> */}
                    <div class="trigger-design-header__left-name mar-l-16">
                        {isEdit.value ? <el-input value={title.value} onInput={handleInput} onBlur={handleInputBlur} maxLength="50" ref={el => inputRef.value = el}></el-input> : <div class="text">{title.value}</div>}
                       { !isEdit.value ? <i class="iconfont icon-edit-square1" onClick={()=> setIsEdit(!isEdit.value)}></i> : null}
                    </div>
                </div>
                <div class="trigger-design-header__right">
                    {/* <span class="tutorial-text">
                        <i class="iconfont icon-xingzhuang"></i>    
                        教程
                    </span> */}
                    {/* <el-button type="plain-third">测试</el-button> */}
                    {
                        props.triggerId ? (
                            <el-button type="primary" onClick={() => currentCtx.$eventBus.$emit('trigger-design-update')} disabled={state.buttonStatus}>保存</el-button>
                        ) : (
                            <el-button type="primary" onClick={() => currentCtx.$eventBus.$emit('trigger-design-save')} disabled={state.buttonStatus}>保存</el-button>
                        )
                    }
                </div>
            </header>
        )
    }
})